<ui:composition template="/templates/store.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="pageHead"></ui:define>
	<ui:define name="pageTitle">Accueil</ui:define>
	<ui:define name="first"></ui:define>
	
	<ui:define name="body">
	
		<!-- Juste besoin de faire appel à primefaces sinon pas automatiquement chargé :( -->
		<p:spinner />
		<div class="row">
			<ul class="casse-big orbit-container" data-orbit="true"
				data-options="animation:slide; animation_speed:1000; pause_on_hover:true; animation_speed:500; navigation_arrows:true; bullets:false; next_on_click:true;">
				<li><img
					src="../img/promotions/promo1.png"
					alt="Promotion 1" />
					<div class="orbit-caption">Promotion 1</div></li>
				<li><img
					src="../img/promotions/promo2.png"
					alt="Promotion 2" />
					<div class="orbit-caption">Promotion 2</div></li>
				<li><img
					src="../img/promotions/promo3.png"
					alt="Promotion 3" />
					<div class="orbit-caption">Promotion 3</div></li>
			</ul>
		</div>

		<div class="row casse-medium">
			<div class="large-7 medium-6 small-12 columns">
				<h2>Meilleures ventes</h2>
				<h:form>
					<dl class="sub-nav">
						<dt>catégories :</dt>
						<ui:repeat var="cat" value="#{accueilMB.categoriesRacines}">
							<h:panelGroup
								rendered="#{accueilMB.idCategorieChoisie eq cat.idCategorieReve}">
								<dd class="active">
									<a href="#">#{cat.libelle}</a>
								</dd>
							</h:panelGroup>
							<h:panelGroup
								rendered="#{!(accueilMB.idCategorieChoisie eq cat.idCategorieReve)}">
								<dd>
									<h:commandLink value="#{cat.libelle}"
										action="#{accueilMB.changerCategorieReve(cat.idCategorieReve)}" />
								</dd>
							</h:panelGroup>
						</ui:repeat>
					</dl>
				</h:form>

				<ui:repeat var="bestsell" value="#{accueilMB.listeRevesPlusVendus}">
					<div class="row casse-medium catalogue-item">
						<div class="small-3 columns">
							<h:graphicImage value="../img/reves/#{bestsell.image}" width="100" height="100" />
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<a
										href="../pages/ficheReve.jsf?id=#{bestsell.idReve}">#{bestsell.nom}</a>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-8 columns">
										<a href="#">#{bestsell.prix} €</a>
									</div>
									<div class="small-4 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</ui:repeat>
			</div>
			<div class="large-4 medium-5 small-12 columns">
				<div class="row">
					<h4>Derniers rêves vus</h4>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp"
								width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp"
								width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp"
								width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row casse-medium">
					<h4>Nouveaux produits</h4>
					<ui:repeat var="newreve" value="#{accueilMB.listeNouveauxReves}">
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<h:graphicImage value="/img/reves/#{newreve.image}" width="100" height="100"></h:graphicImage>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<a href="../pages/ficheReve.jsf?id=#{newreve.idReve}">#{newreve.nom}</a>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<a href="#">#{newreve.prix} €</a>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					</ui:repeat>
					
				</div>
				<div class="row casse-medium">
					<h4>Contactez-nous</h4>
					<div class="row contact">
						<div class="small-4 columns">
							<img src="../img/vincent.jpg" alt="photo" />
						</div>
						<div class="small-7 small-offset-1">
							<label>DreamsHop</label>
							<p>
								3 rue Danton<br /> 92240 Malakoff<br /> afcepf@afcepf.fr<br />
								01 49 65 62 49
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>

	<ui:define name="last"></ui:define>

</ui:composition>